import React, { Component } from 'react'
import {connect} from "react-redux"
import {IProduct} from "../../../types/product"
import axios from "axios"
import Product from "../../../components/Product"

interface IProps{
    initList:(list:IProduct[])=>void,
    list:IProduct[]
}
interface IState{}
 class Home extends Component<IProps,IState> {
    componentDidMount(){
        axios.get('/api/list').then(res=>{
            this.props.initList(res.data.list)
        })
    }
    render() {
        let {list} = this.props;
        return (
            <div className="list">
                {
                    list.length && list.map((item:IProduct)=><Product item={item} key={item.id} ></Product>)
                }
            </div>
        )
    }
}
let stateMapToProps=(state:any)=>{
    console.log(state,'131231')
    return{
        list:state.list.list
    }
}
let dispatchMaptoProps =(dispatch:any)=>{
    return{
        initList(list:IProduct[]){
            dispatch({type:'Init_LIST',list})
        }
    }
}
export default connect(stateMapToProps,dispatchMaptoProps)(Home)
